import React from 'react';
import {Provider} from 'react-redux';
import * as Bootstrap from 'react-bootstrap';
import BaseStepContainer from './BaseStepContainer.jsx';

import * as action from "../actions/ProjectContainerAction";
import {projectContainerStore} from '../stores/ProjectContainerStore';
import  './Project.less';

import * as  CommonUtil from '../util/CommonUtil';

export default class ProjectContainer extends BaseStepContainer {

    constructor(props) {
        super(props);
        this.state.stepName = "Project";
    };

    contentRender() {
        let projectRenderList = [];

        if (this.state) {
            const {projectList} =this.state;

            if (projectList) {
                const BS_STYLES = ["primary", "success", "info", "warning", "danger"];
                projectList.map((item, index)=> {
                        const {projectName, companyName, counterpart, introduction, duties, program, startDate, endDate} =item;
                        let dutyRenderList = [];

                        duties.map((item, index)=> {
                            dutyRenderList.push(
                                <Bootstrap.Row key={index}>
                                    <Bootstrap.Col xs={12} className="text-two-word">
                                        {'（' + (index + 1) + '）' + item}
                                    </Bootstrap.Col>
                                </Bootstrap.Row>
                            )
                        });

                        projectRenderList.push(
                            <Bootstrap.Panel header={projectName} bsStyle={BS_STYLES[index % BS_STYLES.length]} key={index}>
                                <Bootstrap.ListGroup fill>
                                    <Bootstrap.ListGroupItem >
                                        <Bootstrap.Row>
                                            <Bootstrap.Col xs={4}>
                                                {this.getStartEndDate(startDate, endDate)}
                                            </Bootstrap.Col>
                                            <Bootstrap.Col xs={8} className="text-right">
                                                {companyName}
                                            </Bootstrap.Col>
                                        </Bootstrap.Row>
                                    </Bootstrap.ListGroupItem>
                                    <Bootstrap.ListGroupItem >
                                        <Bootstrap.Row>
                                            <Bootstrap.Col xs={4}>
                                                {counterpart}
                                            </Bootstrap.Col>
                                            <Bootstrap.Col xs={8} className="text-right">
                                                {program}
                                            </Bootstrap.Col>
                                        </Bootstrap.Row>
                                    </Bootstrap.ListGroupItem>
                                    <Bootstrap.ListGroupItem header="项目介绍">
                                        <Bootstrap.Row>
                                            <Bootstrap.Col xs={12} className="text-two-word">
                                                {introduction}
                                            </Bootstrap.Col>
                                        </Bootstrap.Row>
                                    </Bootstrap.ListGroupItem>
                                    <Bootstrap.ListGroupItem header="职责">
                                        {dutyRenderList}
                                    </Bootstrap.ListGroupItem>
                                </Bootstrap.ListGroup>
                            </Bootstrap.Panel>
                        );
                    }
                );
            }
        }
        return (
            <Provider store={projectContainerStore}>
                <Bootstrap.Row>
                    <Bootstrap.Col xs={8} xsOffset={2}>
                        {projectRenderList}
                    </Bootstrap.Col>
                </Bootstrap.Row>
            </Provider>
        );
    }

    componentWillMount() {
        const {self}= this.state;
        projectContainerStore.subscribe(() => {
            const {projectReducer} = projectContainerStore.getState();
            self.reloadProject(projectReducer);
        });
        projectContainerStore.dispatch(action.getProject());
    }

    reloadProject(projectReducer) {
        if (projectReducer.isChange) {
            projectReducer.payload.then((data) => {
                const {code, result} = data;
                if (1 == code) {
                    this.setState({
                        "projectList": result
                    });
                }
            });
        }
    }

    getStartEndDate(startDate, endDate) {
        const YYYY_MM = "yyyy年MM月";

        let startDateYM = "";
        let endDateYM = "至今";

        if (startDate) {
            const dStartDate = new Date();
            dStartDate.setTime(startDate);
            startDateYM = CommonUtil.dateFormat(dStartDate, YYYY_MM);
        }

        if (endDate) {
            const dEndDate = new Date();
            dEndDate.setTime(endDate);
            endDateYM = CommonUtil.dateFormat(dEndDate, YYYY_MM);
        }

        return startDateYM + "-" + endDateYM;
    }

}
